Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Скрипт позволяет быстро и эффективно формировать карточки товаров для материалов других модулей, таких как новости, блог, каталог статей и другие. Скрипт работает на страницах добавления материалов.

Пример:

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js. Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в папку js и загрузите в эту папку файл "um.shop-vidget.js" из архива со скриптом (папка "скрипты").

Второй шаг: установка кода

Перейдите в панель управления и выберите в главном меню Дизайн - Управление дизайном (шаблоны). На открывшейся странице у нужного модуля выберите Нижняя часть сайта:

Добавьте код в самый конец шаблона перед закрывающим тегом </body>:

<?if $PAGE_ID$ = 'add' or $PAGE_ID$ = 'edit'?>
<script src="/js/um.shop-vidget.js"></script>
<?endif?>

Пример:

Нажмите "Сохранить".

Третий шаг: установка стилей

Перейдите в панель управления и в главном меню выберите Дизайн - Управление дизайном (шаблоны). На открывшейся странице выберите Таблица стилей (CSS):

Добавьте следующий код:

input.shop-in-vidget {
	width: 80%;
}
input.shop-btn-vidget {
	width: 19%;
}
input.shop-out-vidget {
	width: 100%;
	height: 150px;
}
							

Информация о классах:

• .shop-in-vidget – поля для ввода ID товара;
• .shop-btn-vidget – кнопка поиска товаров по ID;
• .shop-out-vidget – поле с HTML кодом товаров;

Пример:

Нажмите "Сохранить".

Четвертый шаг: настройка и использование

В файле um.shop-vidget.js имеются настройки:

var opt = {
	inClass: 'shop-in-vidget',
	inText: 'Добавление товара к материалу',
	inPlhld: 'Введите ID товара через запятую, например: 747, 700, 560',
	btnText: 'Найти',
	btnClass: 'shop-btn-vidget',
	outClass: 'shop-out-vidget',
	outText: 'Скопируйте этот HTML-код',
	outPlhld: 'Здесь будет HTML код товаров',
	itemsCurr: ' USD',
	itemsBtn: 'btn btn-default'
};
							

Где:
• inClass - имя класса для поля ввода ID товаров;
• inText - описание для поля ввода ID товаров;
• inText - текст по умолчанию для поля ввода ID товаров;
• btnText - текст кнопки поиска товаров по ID;
• btnClass - класс кнопки поиска товаров по ID;
• outClass - имя класса для поля вывода HTML товаров;
• outText - описание для поля вывода HTML товаров;
• outPlhld - текст по умолчанию для поля вывода HTML товаров;
• itemsCurr - валюта магазина по умолчанию;
• itemsBtn - класс кнопки "Подробнее" у товара (можно указать несколько классов через пробел);